<template>
  <el-page-header>
    <template #breadcrumb>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item >
          <router-link to="/manager/mangerindex" class="menu-router">首页</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item
        ><router-link to="/manager/manageitem" class="menu-router">商品管理</router-link></el-breadcrumb-item
        >
      </el-breadcrumb>
    </template>
    <template #content>

      <span class="text-large font-600 mr-3"> 商品管理 </span>
    </template>
  </el-page-header>
  <el-button type="success" style=" margin-left: 20px;margin-top: 20px ;width: 80px; height: 50px; margin-bottom: 10px" @click="centerDialogVisible = true">增加菜品</el-button>
  <el-button type="danger" style=" margin-left: 900px;margin-top: 20px ;width: 100px; height: 50px; margin-bottom: 10px" @click="isdisCount()">全场特价活动</el-button>
  <el-button type="primary" style=" margin-top: 20px ;width: 100px; height: 50px; margin-bottom: 10px" @click="recoveritemprice()" v-if="isrecover">恢复原价</el-button>

  <el-table :data="currentPageItems" style="width: 100%" >
    <el-table-column
        prop="imageUrl"
        label="图片"
        width="180">
      <template #default="{ row }">
        <el-image
            v-if="row.imageUrl"
            :src="row.imageUrl"
            fit="cover"
            style="width: 50%; height: 50%;">
          <div slot="error" class="image-slot">
            图片加载失败
          </div>
        </el-image>
      </template>
    </el-table-column>
    <el-table-column fixed prop="itemname" label="菜名" width="150" />
    <el-table-column prop="description" label="描述" width="120" />
    <el-table-column prop="price" label="价钱" width="120" />
    <el-table-column prop="type" label="类型" width="120" />
    <el-table-column prop="sales" label="销量" width="120"/>
    <el-table-column prop="isdelete" label="状态" width="120" >
      <template #default="{ row }">
        <span :style="{ color:row.color, fontWeight: 'bold' , fontSize: '15px', fontFamily: 'Arial, sans-serif'}">{{ row.isdelete}}</span>
      </template>
    </el-table-column>
      <el-table-column prop="quantity" label="余量" width="600">
    </el-table-column>


    <el-table-column fixed="right" label="操作" width="120" >
      <template #default="{row}">
        <el-button link type="primary" size="small" class="el-button1" @click="getolditemByitemId(row.id)">修改菜品详情</el-button>
        <el-button link type="primary" size="small" @click="specaillitem(row.id)">设置为特价商品</el-button>
        <el-button link type="primary" size="small" @click="ideleteitemByid(row)">{{row.button}}</el-button>
        <el-button link type="primary" size="small" @click="priceitemlitem(row.id)">修改菜品单价</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      small
      background
      layout="prev, pager, next"
      :total="totalItems"
      :page-size="pageSize"
      v-model:currentPage="currentPage"
      class="mt-4"
  />
  <el-dialog
      v-model="centerDialogVisible"
      title="添加菜品"
      width="500"
      align-center
  >
    <div class="diglog-div">
      <span>请输入新菜品名:   </span>
      <el-input
          v-model="item.itemname"
          style="width: 240px"
          type="text"
          placeholder="请输入新菜名"
      />
    </div >
    <div class="diglog-div">
      <span>请输入新菜品描述:   </span>
      <el-input
          v-model="item.description"
          style="width: 240px"
          type="text"
          placeholder="请输入新的菜品描述"
      />
    </div>
    <div class="diglog-div">
      <span>请输入新菜品价格:   </span>
      <el-input
          v-model="item.price"
          style="width: 240px"
          type="text"
          placeholder="请输入新的菜品价格"
      />
    </div>

    <div class="diglog-div">
      <span>请输入新菜品余量:   </span>
      <el-input
          v-model="item.quantity"
          style="width: 240px"
          type="text"
          placeholder="请输入新的菜品余量"
      />
    </div>
    <div class="diglog-div">
      <span>请输入新菜品类型:   </span>
      <el-input
          v-model="item.type"
          style="width: 240px"
          type="text"
          placeholder="请输入新的菜品类型"
      />
    </div>
    <div>
      <span class="diglog-span">上传菜品图片: </span>
      <el-upload
          class="avatar-uploader"
          action="http://localhost:8090/food/updateuserimageurl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </div>


    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false" type="primary">Cancel</el-button>
        <el-button @click="insertmenuBybakground()" type="success">添加</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
      v-model="updateitem"
      title="修改菜品菜品"
      width="500"
      align-center
  >
    <div class="diglog-div">
      <span>请输入新菜品名:   </span>
      <el-input
          v-model="olditem.itemname"
          style="width: 240px"
          type="text"
          placeholder="请输入新菜名"
      />
    </div >
    <div class="diglog-div">
      <span>请输入新菜品描述:   </span>
      <el-input
          v-model="olditem.description"
          style="width: 240px"
          type="text"
          placeholder="请输入新的菜品描述"
      />
    </div>
    <div class="diglog-div">
      <span>请输入新菜品价格:   </span>
      <el-input
          v-model="olditem.price"
          style="width: 240px"
          type="text"
          placeholder="请输入新的菜品价格"
      />
    </div>

    <div class="diglog-div">
      <span>请输入新菜品余量:   </span>
      <el-input
          v-model="olditem.quantity"
          style="width: 240px"
          type="text"
          placeholder="请输入新的菜品余量"
      />
    </div>
    <div class="diglog-div">
      <span>请输入新菜品类型:   </span>
      <el-input
          v-model="olditem.type"
          style="width: 240px"
          type="text"
          placeholder="请输入新的菜品类型"
      />
    </div>
    <div>
      <span class="diglog-span">上传菜品图片: </span>
      <el-upload
          class="avatar-uploader"
          action="http://localhost:8090/food/updateuserimageurl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </div>


    <template #footer>
      <div class="dialog-footer">
        <el-button @click=" updateitem = false" type="primary">Cancel</el-button>
        <el-button @click="updateitemByitem()" type="success">添加</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
      v-model="specialmenu"
      title="添加为特价菜品"
      width="500"
      align-center
  >
    <div class="diglog-div">
      <span>菜品名:   </span>
      <el-input
          v-model="olditem.itemname"
          style="width: 240px"
          type="text"
          placeholder="请输入新菜名"
          disabled
      />
    </div >

    <div class="diglog-div">
      <span>原价:   </span>
      <el-input
          v-model="olditem.price"
          style="width: 240px"
          type="text"
          placeholder="请输入新的菜品价格"
          disabled
      />
    </div>
    <div class="diglog-div">
      <span>特价:   </span>
      <el-input
          v-model="olditem.specialPrice"
          style="width: 240px"
          type="text"
          placeholder="请输入要修改的特价"
      />
    </div>
    <div class="diglog-div">
      <span>菜品余量:   </span>
      <el-input
          v-model="olditem.quantity"
          style="width: 240px"
          type="text"
          placeholder="请输入新的菜品余量"
      />
    </div>
    <div>
      <span class="diglog-span">上传特价菜品图片: </span>
      <el-upload
          class="avatar-uploader"
          action="http://localhost:8090/food/updateuserimageurl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </div>


    <template #footer>
      <div class="dialog-footer">
        <el-button @click=" specialmenu = false" type="primary">Cancel</el-button>
        <el-button @click="updateitemspecialPriceandtypeandquantityByitemId()" type="success">添加</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
      v-model="priceitem"
      title="修改菜品价格"
      width="500"
      align-center
  >
    <div class="diglog-div">
      <span>菜品名:   </span>
      <el-input
          v-model="olditem.itemname"
          style="width: 240px"
          type="text"
          placeholder="请输入新菜名"
          disabled
      />
    </div >

    <div class="diglog-div">
      <span>原价:   </span>
      <el-input
          v-model="olditem.price"
          style="width: 240px"
          type="text"
          placeholder="请输入新的菜品价格"
          disabled
      />
    </div>
    <div class="diglog-div">
      <span>现价:   </span>
      <el-input
          v-model="olditem.price"
          style="width: 240px"
          type="text"
          placeholder="请输入新的菜品价格"
      />
    </div>



    <template #footer>
      <div class="dialog-footer">
        <el-button @click=" priceitem = false" type="primary">Cancel</el-button>
        <el-button @click="updatepriceByid()" type="success">添加</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
      v-model="showdiscount"
      title="全场打折"
      width="500"
      align-center
  >
    <el-select
        v-model="value"
        clearable
        placeholder="选择你的折扣"
        style="width: 240px"
    >
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>
    <el-select
        v-model="value2"
        clearable
        placeholder="选择你要打折的菜品类型"
        style="width: 240px"
    >
      <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />

    </el-select>
    <el-input
        v-model="message"
        style="width: 240px"
        type="text"
        placeholder="请输入公告内容"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click=" showdiscount = false" type="primary">Cancel</el-button>
        <el-button @click="sendmessageToitem()" type="success">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import {computed,onMounted, reactive, ref} from "vue";
import {
  getallmenulistservice,
  getolditemByidservice, ideleteitemByidservice,
  insertmenuBybakgroundService, recoveritempriceservice, sendmessageToitemservice,
  updateitemBybakgroundService, updateitemspecialPriceandtypeandquantityByitemIdService, updatepriceByidservice
} from "../api/food.js";
import {ElMessage} from "element-plus";
import {a} from "vite/dist/node/types.d-aGj9QkWt";
const centerDialogVisible=ref(false);
const tableData=reactive([]);
const imageUrl = ref('')
const imageUrls=ref()
const itemids=ref();
const message=ref()
const value2=ref()
const currentPage = ref(1); // 当前页数
const pageSize = ref(10);
const isdiscount=ref(0)
const showdiscount=ref(false);
const priceitem=ref(false);
const isrecover=ref(false);
const specialmenu =ref(false);
const olditem=reactive({
  specialPrice:"",
  id:"",
  itemname:"",
  description:"",
  price:"",
  type:"",
  quantity:"",
  imageUrl:""
})
const value = ref()
const options = [
  {
    value: 0.95,
    label: '全场九五折',
  },
  {
    value: 0.9,
    label: '全场九折',
  },
  {
    value: 0.85,
    label: '全场八五折',
  },
    {
      value: 0.8,
      label: '全场八折',
    },
    {
      value: 0.75,
      label: '全场七五折',
    },
]
const options2 = [
  {
    value: '热菜',
    label: '热菜'
  },
  {
    value: '凉菜',
    label: '凉菜'
  },
    {
      value: '肉',
      label: '肉'
    },
  {
    value: '海鲜',
    label: '海鲜'
  },   {
    value: '主食',
    label: '主食'
  }, {
    value: '全部',
    label: '全部'
  },

]
const updateitem=ref(false);
const item=reactive(
    {
      itemname:"",
      description:"",
      price:"",
      type:"",
      quantity:"",
      imageUrl:""
    }
)
const getallmenulist = async () => {
  const response = await getallmenulistservice();
  if (response.code === 200) {
    tableData.splice(0, tableData.length)
  response.date.forEach((item) => {
    if(item.isdelete===0){
      item.button="下架菜品";
      item.isdelete="正常上架";
      item.color="green";
    }
    if(item.isdelete===1){
      item.button="上架菜品";
      item.isdelete="已下架";
      item.color="red";
    }
    tableData.push(item);
    console.log(item);
  })
  }
  else {
    console.log(response.message);
  }

}
onMounted(()=>{
  getallmenulist();
})
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  item.imageUrl= response.date;
  olditem.imageUrl=response.date;
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

const currentPageItems = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  const endIndex = startIndex + pageSize.value;
  return tableData.slice(startIndex, endIndex);
});
const totalItems = computed(() => tableData.length);

const insertmenuBybakground = async () => {
  console.log(item);
  if(item!==null){
    const response = await insertmenuBybakgroundService(item);
    if (response.code === 200) {
      this.value.item={};
      if(item===null){
        console.log("item已经清空")
      }
      ElMessage.success('添加成功');
      centerDialogVisible.value = false;
      await getallmenulist();
    } else {
      ElMessage.error(response.message);
    }


  }

}

const getolditemByitemId = async (itemid) => {
  updateitem.value = true;
  const response = await getolditemByidservice(itemid);
  if (response.code === 200) {
    olditem.id = response.date.id;
    olditem.itemname = response.date.itemname;
    olditem.description = response.date.description;
    olditem.price = response.date.price;
    olditem.type = response.date.type;
    olditem.quantity = response.date.quantity;
    olditem.imageUrl = response.date.imageUrl;
    console.log("olditem" + olditem)
    console.log(response.date);
  } else {
    ElMessage.error(response.message);
  }
}


const updateitemByitem=async ()=>{
  const response = await updateitemBybakgroundService(olditem);
  if (response.code === 200) {
    ElMessage.success('修改成功');
    updateitem.value=false;
    await getallmenulist();
  } else {
    ElMessage.error(response.message);
  }
}

const specaillitem = async (id) => {
  await getolditemByitemId(id)
  specialmenu.value=true;
  updateitem.value = false;
}
const updateitemspecialPriceandtypeandquantityByitemId =async () => {
  olditem.type=olditem.type+"特价";
  const response = await updateitemspecialPriceandtypeandquantityByitemIdService(olditem);
  if (response.code === 200) {
    ElMessage.success('修改成功');
    specialmenu.value=false;
    await getallmenulist();
  } else {
    ElMessage.error(response.message);
  }

}
const ideleteitemByid = async (row) => {
  const response = await ideleteitemByidservice(row.id);
  if (response.code === 200) {
    console.log(row.isdelete)
    if(row.isdelete==='正常上架' || row.isdelete===0)
    {
      ElMessage.success('删除成功');
      await getallmenulist();
    }
    if(row.isdelete==='已下架' || row.isdelete===1)
    {
      ElMessage.success('上架成功');
      await getallmenulist();
    }
  } else {
    ElMessage.error(response.message);
  }

}
const updatepriceByid = async () => {
  const response = await updatepriceByidservice(olditem.id,olditem.price);
  if (response.code === 200) {
    ElMessage.success('修改成功');
    priceitem.value=false;
    await getallmenulist();
  } else {
    ElMessage.error(response.message);
  }


}
const priceitemlitem = async (id) => {
  await getolditemByitemId(id)
  updateitem.value = false;
  priceitem.value=true;
}
const isdisCount = () => {
  if(isdiscount.value===0){
    showdiscount.value=true
    ElMessage.success('已开启折扣');
  }else {
    showdiscount.value=false
    ElMessage.success('已经开启过折扣，无法点击，请恢复原价后打折');
  }
}
const sendmessageToitem = async () => {
  showdiscount.value = false;
  const response = await sendmessageToitemservice(message.value, value2.value, value.value);
  if (response.code === 200) {
    isdiscount.value = 1
    isrecover.value = true
    ElMessage.success('发送成功');
    centerDialogVisible.value = false;
    await getallmenulist();
  } else {
    ElMessage.error(response.message);
  }

}
const recoveritemprice = async () => {
  const response = await recoveritempriceservice();
  if (response.code === 200) {
    isdiscount.value = 0
    isrecover.value = false
    ElMessage.success('恢复成功');
    await getallmenulist();
  } else {
    ElMessage.error(response.message);
  }

}
</script>

<style scoped>
.el-button1{
  margin-left: 11px;
}
.diglog-div{
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.el-button1{
  margin-left: 10px;
}
.el-table-amount{
  text-align: center;
  color: #ff0000;
  font-weight: bold;
  font-size: 20px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.diglog-span{
  margin-right: 10px;
  font-size: 20px;
  font-weight: bold;
  color: rosybrown;
  margin-bottom: 10px;
  margin-top: 10px;
  display: inline-block;
}
.el-status{
  margin-left: 10px;
  font-size: 20px;
  font-weight: bold;



}
</style>